<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column history-view")
            div(class="flex-column-item flex-row h3")

                div(class="flex-row-item left")
                    span {{currentItem.createTime | format('MMDD')}}
                div(class="flex-row-item center")
                    span {{totalAmount | fixed(2)}}u
                div(class="flex-row-item right")
                    span {{currentItemIndex + 1 | fixed}}

            div(class="flex-column-item flex-row h3")
                div(class="flex-row-item left")
                    span(class="black") {{currentRange.name}}:00
                    span >
                    span {{currentRange.value }}u/h

            div(class="flex-column-item flex-2")
                rate-chart(v-model="rateValues",:active-index="currentRangeIndex",ref="chart")
</template>

<script>
import RateChart from "@/component/RateChart";
import Base from '@/mixins/BaseVue'
export default {
    components: {RateChart},
    mixins:[Base],
    data(){
        return {
            items: [].concat(window.rate.records).reverse(),
            currentItem: null,
            currentItemIndex: 0,
            currentRange:null,
            currentRangeIndex: 0
    }
    },
    computed:{
        totalAmount(){
            let total = 0;
            this.currentItem.value.forEach(range =>  total =(total*10 + range.value * 10) /10 );
            return total;
        },
        nextHour(){
            return this.currentRangeIndex == this.currentItem.value.length - 1
                ? "24"
                : this.currentItem.value[this.currentRangeIndex + 1].name;
        },
        rateValues(){
            return window.rate.records[this.currentItemIndex].value.map(t=> {return t.value});
        }
    },

    methods: {
    
        yes() {
            var index = this.currentItemIndex == this.items.length - 1 ? 0 : this.currentItemIndex +1;

            this.currentItem = this.items[index];
            this.currentItemIndex = index;

            this.currentRange = this.currentItem.value[0];
            this.currentRangeIndex = 0;
        },

        back() {
                this.$router.push('/base-rate?index=4');
        },
        up() {

            let ranges = this.currentItem.value;
        
            let index = this.currentRangeIndex ==ranges.length -1 ? 0 : this.currentRangeIndex + 1;
            
            this.currentRange = ranges[index];  
            this.currentRangeIndex = index;
        },
        down() {
            let ranges = this.currentItem.value;
        
            let index = this.currentRangeIndex ==0 ? ranges.length -1 : this.currentRangeIndex - 1;
            
            this.currentRange = ranges[index];  
            this.currentRangeIndex = index;
        },
    },

    created(){
        this.currentItem = this.items[0];
        this.currentItemIndex = 0;
        this.currentRange = this.currentItem.value[0];
        this.currentRangeIndex = 0;
    }
}
</script>